<template>
	<view class="bodys">
		<view></view>
		<view class="net__content">
			<u-subsection
				:list="['无线2G', '无线4G','无线5G']"
				mode="button"
				inactiveColor="#55ffff" 
				bgColor="#55aaff"
				:current="netlistCurrent"
				@change="change1"
			></u-subsection>
		</view>
		
		<view class="body1">
			<view class="address__content">辽宁</view>
			<view style="margin-top: 60rpx;">
				<u-row customStyle="margin-bottom: 10px">
					<u-col span="4">
						<view style="color: #00ff7f;text-align: center;font-weight: bold;">
							{{CompanyCount}}
						</view>
						<view style="text-align: center;font-weight: bold;">单位数量</view>
					</u-col>
					<u-col span="4">
						<view style="color: #00ffff;text-align: center;font-weight: bold;">
							{{BaseStationCount}}
						</view>
						<view style="text-align: center;font-weight: bold;">基站数量</view>
					</u-col>
					<u-col span="4">
						<view style="color: #ff0000;text-align: center;font-weight: bold;">
							{{tuifuBaseStationCount}}
						</view>
						<view style="text-align: center;font-weight: bold;">退服基站数量</view>
					</u-col>
				</u-row>
			</view>
			<view><u-line></u-line></view>
			<view class="wrap">
				<mpvue-echarts id="main" ref="mapChart" :echarts="echarts" @onInit="renderMap" />
			</view>
			<view class="table1">
				<u-table border stripe >
					<u-tr class="u-tr">
						<u-th class="u-th">区域</u-th>
						<u-th class="u-th">保障单位数量</u-th>
						<u-th class="u-th">基站数量</u-th>
						<u-th class="u-th">退服基站数量</u-th>
					</u-tr>
					<u-tr class="u-tr" v-for="item in tableList" :key="item.id">
						<u-td class="u-td">{{ item.area }}</u-td>
						<u-td class="u-td">{{ item.bz }}</u-td>
						<u-td class="u-td">{{ item.jz }}</u-td>
						<u-td class="u-td">{{ item.gzjz }}</u-td>
					</u-tr>
				</u-table>
			</view>
		</view>
		
	</view>
</template>

<script>
	import * as echarts from 'echarts'; /*echarts.min.js为在线定制*/
	import * as liaoniJson from '../../../echarts/map/json/liaoni.json'; /*echart.min.js为在线定制*/
	import mpvueEcharts from 'mpvue-echarts';
	export default {
		data() {
			return {
				//网络配置
				netlistCurrent: 0,
				CompanyCount: 48,
				BaseStationCount: 252,
				tuifuBaseStationCount: 25,
				tableList: [{
								id: 0,
								area: '沈阳市',
								bz: '6',
								jz: '30',
								gzjz:8
							},
							{
								id: 1,
								area: '大连市',
								bz: '4',
								jz: '20',
								gzjz:4
							},
							{
								id: 2,
								area: '鞍山市',
								bz: '3',
								jz: '30',
								gzjz:0
							},
							{
								id: 3,
								area: '抚顺市',
								bz: '2',
								jz: '10',
								gzjz:0
							},
							{
								id: 4,
								area: '本溪市',
								bz: '3',
								jz: '16',
								gzjz:1
							},
							{
								id: 5,
								area: '丹东市',
								bz: '2',
								jz: '14',
								gzjz:8
							},
							{
								id: 6,
								area: '锦州市',
								bz: '5',
								jz: '9',
								gzjz:0
							},
							{
								id: 7,
								area: '营口市',
								bz: '3',
								jz: '21',
								gzjz:0
							},
							{
								id: 8,
								area: '阜新市',
								bz: '2',
								jz: '5',
								gzjz:0
							},
							{
								id: 9,
								area: '辽阳市',
								bz: '6',
								jz: '36',
								gzjz:1
							},
							{
								id: 10,
								area: '盘锦市',
								bz: '4',
								jz: '14',
								gzjz:2
							},
							{
								id: 11,
								area: '铁岭市',
								bz: '4',
								jz: '13',
								gzjz:0
							},
							{
								id: 12,
								area: '朝阳市',
								bz: '2',
								jz: '12',
								gzjz:0
							},
							{
								id: 13,
								area: '葫芦岛市',
								bz: '2',
								jz: '22',
								gzjz:1
							}
						],
				tableList1: [{
								id: 0,
								area: '沈阳市',
								bz: '6',
								jz: '30',
								gzjz:8
							},
							{
								id: 1,
								area: '大连市',
								bz: '4',
								jz: '20',
								gzjz:4
							},
							{
								id: 2,
								area: '鞍山市',
								bz: '3',
								jz: '30',
								gzjz:0
							},
							{
								id: 3,
								area: '抚顺市',
								bz: '2',
								jz: '10',
								gzjz:0
							},
							{
								id: 4,
								area: '本溪市',
								bz: '3',
								jz: '16',
								gzjz:1
							},
							{
								id: 5,
								area: '丹东市',
								bz: '2',
								jz: '14',
								gzjz:8
							},
							{
								id: 6,
								area: '锦州市',
								bz: '5',
								jz: '9',
								gzjz:0
							},
							{
								id: 7,
								area: '营口市',
								bz: '3',
								jz: '21',
								gzjz:0
							},
							{
								id: 8,
								area: '阜新市',
								bz: '2',
								jz: '5',
								gzjz:0
							},
							{
								id: 9,
								area: '辽阳市',
								bz: '6',
								jz: '36',
								gzjz:1
							},
							{
								id: 10,
								area: '盘锦市',
								bz: '4',
								jz: '14',
								gzjz:2
							},
							{
								id: 11,
								area: '铁岭市',
								bz: '4',
								jz: '13',
								gzjz:0
							},
							{
								id: 12,
								area: '朝阳市',
								bz: '2',
								jz: '12',
								gzjz:0
							},
							{
								id: 13,
								area: '葫芦岛市',
								bz: '2',
								jz: '22',
								gzjz:1
							}
						],
				tableList2: [{
								id: 0,
								area: '沈阳市',
								bz: '60',
								jz: '300',
								gzjz:80
							},
							{
								id: 1,
								area: '大连市',
								bz: '40',
								jz: '200',
								gzjz:40
							},
							{
								id: 2,
								area: '鞍山市',
								bz: '30',
								jz: '300',
								gzjz:30
							},
							{
								id: 3,
								area: '抚顺市',
								bz: '2',
								jz: '10',
								gzjz:0
							},
							{
								id: 4,
								area: '本溪市',
								bz: '3',
								jz: '16',
								gzjz:1
							},
							{
								id: 5,
								area: '丹东市',
								bz: '2',
								jz: '14',
								gzjz:8
							},
							{
								id: 6,
								area: '锦州市',
								bz: '5',
								jz: '9',
								gzjz:0
							},
							{
								id: 7,
								area: '营口市',
								bz: '3',
								jz: '21',
								gzjz:0
							},
							{
								id: 8,
								area: '阜新市',
								bz: '2',
								jz: '5',
								gzjz:0
							},
							{
								id: 9,
								area: '辽阳市',
								bz: '6',
								jz: '36',
								gzjz:1
							},
							{
								id: 10,
								area: '盘锦市',
								bz: '4',
								jz: '14',
								gzjz:2
							},
							{
								id: 11,
								area: '铁岭市',
								bz: '4',
								jz: '13',
								gzjz:0
							},
							{
								id: 12,
								area: '朝阳市',
								bz: '2',
								jz: '12',
								gzjz:0
							},
							{
								id: 13,
								area: '葫芦岛市',
								bz: '2',
								jz: '22',
								gzjz:1
							}
						],
				tableList3: [{
								id: 0,
								area: '沈阳市',
								bz: '360',
								jz: '300',
								gzjz:380
							},
							{
								id: 1,
								area: '大连市',
								bz: '340',
								jz: '300',
								gzjz:340
							},
							{
								id: 2,
								area: '鞍山市',
								bz: '30',
								jz: '300',
								gzjz:30
							},
							{
								id: 3,
								area: '抚顺市',
								bz: '2',
								jz: '10',
								gzjz:0
							},
							{
								id: 4,
								area: '本溪市',
								bz: '3',
								jz: '16',
								gzjz:31
							},
							{
								id: 5,
								area: '丹东市',
								bz: '2',
								jz: '14',
								gzjz:8
							},
							{
								id: 6,
								area: '锦州市',
								bz: '5',
								jz: '9',
								gzjz:0
							},
							{
								id: 7,
								area: '营口市',
								bz: '3',
								jz: '21',
								gzjz:0
							},
							{
								id: 8,
								area: '阜新市',
								bz: '2',
								jz: '5',
								gzjz:0
							},
							{
								id: 9,
								area: '辽阳市',
								bz: '6',
								jz: '36',
								gzjz:1
							},
							{
								id: 10,
								area: '盘锦市',
								bz: '4',
								jz: '14',
								gzjz:2
							},
							{
								id: 11,
								area: '铁岭市',
								bz: '4',
								jz: '13',
								gzjz:0
							},
							{
								id: 12,
								area: '朝阳市',
								bz: '2',
								jz: '12',
								gzjz:0
							},
							{
								id: 13,
								area: '葫芦岛市',
								bz: '2',
								jz: '22',
								gzjz:1
							}
						],
				//地图配置
				echarts,
				data: [],
			};
		},
		components: {
			mpvueEcharts
		},
		
		async onLoad() {
			const that = this;
			//通过http.interceptor.js统一调用后台
			// this.$u.get('/api/getTuifu').then(res =>{
			// 	console.log(res)
			// })
			// 测试成功情况
			// const res = await this.$u.get('/api/getTuifu');
			// 测试失败情况
			// const res = await this.$u.get('/api/getDZJ');
			// console.log(res)
			// that.tableList = res.data;
			// for (var i=0;i<that.tableList.length;i++)
			// { 
			// 	var o = {"name": that.tableList[i].area,"value": that.tableList[i].gzjz};
			// 	that.data.push(o)
			// }
		},
		created: function () {
			let that = this;
		    for (var i=0;i<that.tableList.length;i++)
		    { 
				var o = {"name": that.tableList[i].area,"value": that.tableList[i].gzjz};
				that.data.push(o)
		    }
		},
		methods: {
			//
			change1(index) {
				this.netlistCurrent = index;
				let that = this;
				that.data = [];
				if(index==0){
					that.tableList = that.tableList1;
				}else if(index==1){
					that.tableList = that.tableList2;
				}else{
					that.tableList = that.tableList3;
				}
				for (var i=0;i<that.tableList.length;i++)
				{ 
					var o = {"name": that.tableList[i].area,"value": that.tableList[i].gzjz};
					that.data.push(o);
				};
				
				that.renderMap(this.$refs.mapChart);
			
			},
			change2(index) {
				this.current2 = index
			},
			// 下面为地图
			randomValue() {
				return Math.round(Math.random() * 25);
			},
			renderMap(e) {
				const that = this;
				var mydata = that.data;
				let {
					canvas,
					width,
					height
				} = e;
				width = width - 20;
				echarts.setCanvasCreator(() => canvas);
				const chart = echarts.init(canvas, null, {
					width: width,
					height: height
				});
				echarts.registerMap('liaoni', liaoniJson);
				canvas.setChart(chart)
				var optionMap = {
					// title: {
					// 	text: '',
					// 	x: 'center'
					// },
					tooltip: {
						trigger: 'item',
						formatter: '{b}: {c}'
					},
					//左侧小导航图标
					visualMap: {
						show: true, //图注
						type: 'piecewise',
						min: 0,
						max: 10,
						left: 'left',
						top: 'bottom',
						inRange: {
							color: ['#00ff00','#ffff00','#ff0000'] //取值范围的颜色
						},
						
						pieces: [ //自定义『分段式视觉映射组件（visualMapPiecewise）』的每一段的范围，以及每一段的文字，以及每一段的特别的样式
							{
								min: 0,
								max: 0,
								label: '退服数0'
							},
							{
								min: 1,
								max: 4,
								label: '退服数1-4'
							},
							{
								min: 4,
								label: '退服数>5'
							}
						],
						textStyle: {
							fontSize: 8
						},
					},
					geo: {
						map: 'liaoni',
						roam: false, //不开启缩放和平移
						zoom: 1.2,//视角缩放比例
						label: {
							normal: {
								show: true,
								fontSize: 8,
								color: 'rgba(0, 0, 0, 6.5)' //文字颜色
							},
						},
						itemStyle: {
							normal: {
								borderColor: 'rgba(0, 0, 0, 0.2)' ,//省份边框颜色
								areaColor: '#fff'
							},
							emphasis: {
								areaColor: '#F3B329', //鼠标选择区域颜色
								shadowOffsetX: 0,
								shadowOffsetY: 0,
								shadowBlur: 20,
								borderWidth: 0,
								shadowColor: 'rgba(0, 0, 0, 0.3)' //选择后的边框阴影颜色
							}
						}
					},
					//配置属性
					series: [
						{
							type: 'map',
							geoIndex: 0,
							animation: false,
							data: that.data,
							roam: true,
							label: {
								normal: {
									show: false //省份名称  
								},
								emphasis: {
									show: true
								}
							},
						}
					]
				};
				
				//初始化echarts实例
				chart.setOption(optionMap);
				this.$refs.mapChart.setChart(chart);
			}
		}
	};
</script>

<style scoped lang="scss">
	.wrap {
		width: 100%;
		height: 600rpx;
	}
	.bodys {
		background-color: #d0d3d8;
	}
	.body1 {
		margin: 10rpx;
		background-color: #ffffff;
	}
	.table1 {
		margin-top: 40rpx;
		margin-left: 10rpx;
		margin-right: 10rpx;
		background-color: #aaffff;
	}
	
	.net__content {
		// margin-top: 20rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		flex: 1;
	}
	.list__content1 {
		margin-left: 20rpx;
		margin-right: 20rpx;
		background-color: #efe7f8;
		flex: 1;
	}
	.list__content2 {
		margin-left: 20rpx;
		margin-right: 20rpx;
		background-color: #ffffff;
		flex: 1;
	}
	.address__content {
		margin-left: 30rpx;
		margin-right: 30rpx;
		flex: 1;
		font-weight: bold;
		font-size: 60rpx;
		color: "#000000";
	}
</style>